<template>
    <div class="address">
      <navgistor 
        :title="'收货地址'" 
        >
        </navgistor>
          
      <div class="addressList">
        <div class="list" v-for="item in result" :key="item.ID">
          <div class="title">
            <div class="name_title">
              {{ item.name.substr(0,1) }}
            </div>
            <div class="name">
              {{ item.name }}
            </div>
            <div class="phone">
              {{ item.phone }}
            </div>
            <div class="tabBar">
                <!-- 动态路由的跳转方式 -->
              <span @click="$router.push('/Address/Edit/' + item.ID)">
                编辑
              </span>
            </div>
          </div>
          <div class="desc">
            {{ item.a_provice }}-{{ item.a_city }}-{{ item.a_code }}-{{ item.a_desc }}
          </div>
          <div class="is_select">
            <input 
                type="radio" 
                name="rao"
                :id="'rao' + item.ID"
                :disabled="item.is_select == 1 ? true: false"
                :checked="item.is_select == 1 ? true: false"
                
                @change="radioChange($event,item)"> 
                <!-- $event 事件传值，当前事件发生的元素 从传进的是一个dom对象 -->
            <label :for="'rao' + item.ID">
              设为默认地址
            </label>
          </div>
        </div>
      </div>
      <div class="btn">
        <button @click="$router.push('Address/Add')">
          新增收货地址
        </button>
      </div>
    </div>
  </template>
  <script>
  import navgistor from '@/components/nav-head';
  import {
    getAddressList,
    editAddress
  } from '@/api'
    export default {
      components: {
        navgistor
      },
      data() {
        return {
            result: []
        }
      },
      created(){
        this.getList();
      },
      methods:{
        // 判断单选框的变化
        radioChange(event,item){
            // 让选中的元素 的is_select值 等于 选中的转换值
            item.is_select = Number(event.target.checked)
            // 给item添加一个键  address_id
            item.address_id = item.ID;
            // 调用修改收货地址接口
            editAddress(item).then(res => {
                console.log(res.data);
                // 如果修改成功 重新调用获取收货地址列表的接口
                if(res.data.code == 1){
                    this.$Message.success('设置成功');
                    // 调用获取收货地址列表的接口
                    this.getList();
                }
            })
        },
        getList(){
            getAddressList().then(res => {
                if(res.data.code == 1){
                    this.result = res.data.result
                }
            })
        }
      }
    }
  </script>
  <style lang="scss" scoped>
    .address{
      width: 100%;
      padding: 0 3%;
      min-height: 100vh;
      padding-top: 44px;
      padding-bottom: 10px;
      background-color: #f5f5f5;
    }
    .addressList{
      margin-bottom: 66px;
      margin-top: 10px;
      .list{
        width: 100%;
        padding: 2%;
        min-height: 63px;
        background-color: #fff;
        border-radius: 7px;
        margin-bottom: 20px;
        .title{
          display: flex;
          .name_title{
            width: 30px;
            height: 30px;
            color: #fff;
            background-color: rgb(50, 134, 255);
            text-align: center;
            line-height: 30px;
            font-size: 16px;
            font-weight: bold;
            font-family: '宋体';
            border-radius: 50%;
          }
          .name,
          .phone{
            height: 30px;
            line-height: 30px;
            margin-left: 15px;
          }
          .phone{
            font-size: 12px;
          }
          .tabBar{
            height: 30px;
            line-height: 30px;
            flex-grow: 2;
            text-align: right;
            color: rgb(50, 134, 255);
          }
        }
        .desc{
          min-height: 33px;
          padding: 3px 0;
          line-height: 27px;
          font-size: 13px;
          margin-top: 5px;
        }
        .is_select{
          height: 25px;
          font-size: 13px;
          transform: translateY(2.5px);
          line-height: 25px;
          border-radius: 13px;
          color: rgb(50, 134, 255);
          display: flex;
          align-items: center;
          input{
            margin-right: 3px;
          }
        }
      }
    }
    .btn{
      width: 100%;
      position: fixed;
      bottom: 0;
      left: 0;
      height: 50px;
      background-color: #fff;
      button{
        width: 74%;
        margin-left: 13%;
        height: 34px;
        border-radius: 17px;
        border: 0;
        outline: none;
        text-align: center;
        color: #ffffff;
        background-color: rgb(50, 134, 255);
        font-size: 13px;
        margin-top: 10px;
        &:active{
          background-color: rgb(52, 118, 211);
        }
      }
    }
  </style>